import Taro, {Component} from '@tarojs/taro'
import {View, Button, Input, Picker, Form} from '@tarojs/components'
import {AtIcon} from 'taro-ui'
import {inject, observer} from '@tarojs/mobx'
import {getRuntime, isBankCard, isIDCard} from "../../utils/common";
import {IStoreProps} from '../../store/Stores'

import './creditAdd.less'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class CreditAdd extends Component<IHomeProps> {
  state = {
    cardNo: '', // 卡号 ,
    cardType: 1, // 银行卡分类(信用卡还是储蓄卡) (1 = CreditCard , 2 = SavingsCard ) = ['1', '2'],
    realName: '', // 真实姓名 ,
    idCardNo: '', // 身份证号码 ,
    reservePhone: '', // 银行预留手机号 ,
    cardCVV2: '', // 信用卡背面的cvv2码 ,
    validity: '', // 有效期(示例:03/19,输入0319) ,
    billDay: '', // 账单日期是几号就是几 ,
    billDayIndex: -1, // 账单日期索引 ,
    repaymentDate: '', // 还款日是几号就是几 ,
    repaymentDateIndex: -1, // 还款日索引 ,
    days: []
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '添加信用卡'})
    let days = Array.from(Array(32), (v, k) => k + '日')
    days.shift()
    this.setState({ days })
    this.getLocation()
  }

  componentDidShow(): void {
    Taro.setNavigationBarTitle({title: '添加信用卡'})
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getLocation() {
    Taro.getLocation({
      type: "gcj02"
    }).then(res => {
      console.log(res)
    }).catch(err => console.log(err))
  }

  changeInput(field: string, e) {
    this.setState({ [field]: e.detail.value })
  }

  pickerChange(field: string, e) {
    this.setState({ [field]: e.detail.value })
  }

  submit(e) {
    let { billDayIndex, repaymentDateIndex, cardType } = this.state
    let { idCardNo, cardNo, realName, reservePhone, cardCVV2, validity } = e.detail.value
    if(!realName) { getRuntime().showToast('请填写真实姓名'); return }
    if(!idCardNo) { getRuntime().showToast('请填写身份证号码'); return }
    if(!isIDCard(idCardNo)) { getRuntime().showToast('请填写正确的身份证号码'); return }
    if(!cardNo) { getRuntime().showToast('请填写银行卡卡号'); return }
    if(!isBankCard(cardNo)) { getRuntime().showToast('请填写正确的银行卡卡号'); return }
    if(!cardCVV2) { getRuntime().showToast('请填写CVV2码'); return }
    if(!validity) { getRuntime().showToast('请填写有效日期'); return }
    if(billDayIndex === -1) { getRuntime().showToast('请选择还款日期'); return }
    if(repaymentDateIndex === -1) { getRuntime().showToast('请选择账单日期'); return }
    if(!reservePhone) { getRuntime().showToast('请填写银行预留手机号'); return }

    let { cardStore } = this.props.stores
    cardStore.creditCardSaveCard({
      form: {
        cardNo,
        cardType,
        realName,
        idCardNo,
        reservePhone,
        cardCVV2,
        validity,
        billDay: billDayIndex + 1,
        repaymentDate: repaymentDateIndex + 1
      },
      callback: () => {
        getRuntime().showToast('添加成功~')
        setTimeout(() => { getRuntime().navigateBack() }, 2000)
      }
    })
  }

  render() {
    let { days, billDayIndex, repaymentDateIndex } = this.state
    return (
      <View className='credit-add'>
        <View className='form-wrap content-30'>
          <Form onSubmit={this.submit.bind(this)}>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>真实姓名</View>
              <View className='form-wrap__content'>
                <Input className='input' name='realName' onInput={this.changeInput.bind(this,'realName')} placeholderClass='placeholder-class' placeholder='请输入真实姓名' />
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>身份证号码</View>
              <View className='form-wrap__content'>
                <Input className='input' name='idCardNo' maxLength={20} onInput={this.changeInput.bind(this,'idCardNo')} placeholderClass='placeholder-class' placeholder='请输入身份证号码' />
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>信用卡卡号</View>
              <View className='form-wrap__content'>
                <Input className='input' name='cardNo' onInput={this.changeInput.bind(this,'cardNo')} placeholderClass='placeholder-class' placeholder='请输入信用卡卡号' />
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>CVV2码</View>
              <View className='form-wrap__content'>
                <Input className='input' name='cardCVV2' onInput={this.changeInput.bind(this,'cardCVV2')} placeholderClass='placeholder-class' placeholder='请输入信用卡背面3位CVN2码'/>
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>有效日期</View>
              <View className='form-wrap__content'>
                <Input className='input' name='validity' onInput={this.changeInput.bind(this,'validity')} placeholderClass='placeholder-class' placeholder='示例：03/19，输入0319'/>
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>账单日期</View>
              <View className='form-wrap__content form-wrap__select'>
                <Picker className='select' mode='selector' name='billDay' range={days} onChange={this.pickerChange.bind(this, 'billDayIndex')} >
                  <View className='select' style={{display: 'flex'}}>
                    {billDayIndex<0&&<View className='select placeholder-class'>请选择账单日期</View>}
                    {billDayIndex>=0&&<View className='select'>{days[billDayIndex]}</View>}
                    <AtIcon className='drop-icon' value='chevron-right' size='20' color='#d1d1d1' />
                  </View>
                </Picker>
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>还款日期</View>
              <View className='form-wrap__content form-wrap__select'>
                <Picker className='select' mode='selector' range={days} onChange={this.pickerChange.bind(this, 'repaymentDateIndex')} name='repaymentDate' >
                  <View className='select' style={{display: 'flex'}}>
                    {repaymentDateIndex<0&&<View className='select placeholder-class'>请选择账单日期</View>}
                    {repaymentDateIndex>=0&&<View className='select'>{days[repaymentDateIndex]}</View>}
                    <AtIcon className='drop-icon' value='chevron-right' size='20' color='#d1d1d1' />
                  </View>
                </Picker>
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>手机号码</View>
              <View className='form-wrap__content'>
                <Input className='input' type='number' name='reservePhone' onInput={this.changeInput.bind(this,'reservePhone')} maxLength={11} placeholderClass='placeholder-class' placeholder='请输入手机号码'/>
              </View>
            </View>

            <Button className='page-submit' formType='submit'>立即添加</Button>
          </Form>
        </View>

        <View className='footer-block'/>
        <View className='footer-block'/>

      </View>
    )
  }
}

export default CreditAdd
